window.onload = function () {
  //获取对象
  var play = document.getElementById("play"); //播放按钮
  var mypic = document.getElementById("mypic"); //图片
  var audio = document.getElementById("audio"); //音频
  var next = document.getElementById("next"); //下一曲
  var prev = document.getElementById("prev"); //上一曲
  var stop = document.getElementById("stop"); //停止
  var presentTime = document.getElementById("presentTime"); //当前时间
  var totalTime = document.getElementById("totalTime"); //总时间
  var curProgrees = document.getElementById("curProgrees"); //进度条
  var li = document.querySelectorAll("#playerList li"); //歌曲列表

  //注册事件
  play.addEventListener("click", thePlay);
  next.addEventListener("click", theNext);
  prev.addEventListener("click", thePrev);
  stop.addEventListener("click", theStop);

  //定义变量
  var imgSrc = ["./images/1.jpg", "./images/2.jpg", "./images/3.jpg"]; //图片路径
  var musicSrc = ["./video/1.mp3", "./video/2.mp3", "./video/3.mp3"]; //音频路径
  var num = 0; //数组索引值
  var flag = false; //播放标杆

  //功能开始
  //播放开始/暂停
  function thePlay() {
    flag = !flag;

    if (flag) {
      audio.play(); //播放
      play.className = "play2"; //换图标
      play.title = "暂停"; //换文字
      setTime(); //开启时间
    } else {
      audio.pause(); //暂停
      play.className = "play1"; //换图标
      play.title = "开始"; //换文字
    }
  }

  //停止
  function theStop() {
    audio.currentTime = 0; //当前时间设置为0
    flag = true; //换标杆,调用播放进入else
    thePlay();
  }

  // 下一曲
  function theNext() {
    //自增1
    num++;
    //判定索引值,如果大于最大索引值,拉回到0的索引值位置,进行循环
    if (num > musicSrc.length - 1) {
      num = 0;
    }
    //切歌
    audio.src = musicSrc[num];
    //换图标
    mypic.src = imgSrc[num];
    //换标杆,进行自动播放
    flag = false;
    thePlay();
    changeList(); //播放列表
  }

  //上一曲
  function thePrev() {
    //自减1
    num--;
    //判定索引值,如果小于0,拉到最大索引值位置,进行循环
    if (num < 0) {
      num = musicSrc.length - 1;
    }
    //切歌
    audio.src = musicSrc[num];
    //换图标
    mypic.src = imgSrc[num];
    //换标杆,进行自动播放
    flag = false;
    thePlay();

    changeList(); //播放列表
  }

  //换歌曲列表
  function changeList() {
    //干掉所有li标签上的class
    for (let i = 0; i < li.length; i++) {
      li[i].className = "";
    }
    //设置当前索引值上的class="active";
    li[num].className = "active";
  }

  //设置时间
  function setTime() {
    var timer = setInterval(function () {
      //获取当前时间和总时间
      var curTime = formatTime(audio.currentTime);
      var allTime = formatTime(audio.duration);
      //渲染时间
      if (audio.duration) {
        //判定值是否存,处理总时间 出现NaN的问题
        totalTime.innerHTML = allTime;
      }
      presentTime.innerHTML = curTime;
      //调用进度条
      Progrees(audio.currentTime, audio.duration);
    }, 0);
  }

  //设置时间处理
  function formatTime(time) {
    //处理分钟数
    var minutes =
      Math.floor(time / 60) < 10
        ? "0" + Math.floor(time / 60)
        : Math.floor(time / 60);
    //处理秒数
    var seconds =
      Math.floor(time % 60) < 10
        ? "0" + Math.floor(time % 60)
        : Math.floor(time % 60);
    //返回时间:   00:00的格式
    return minutes + ":" + seconds;
  }

  //进度条
  function Progrees(curTime, allTime) {
    //设置进度条的宽度
    curProgrees.style.width = (curTime / allTime) * 550 + "px";
    //判定当前时间和总时间相同,进入下一曲
    if (curTime === allTime) {
      theNext();
    }
  }
};
